appcan.define("grid", function($, exports, module) {
    var model_Item = '<div class="grid-item ub-ver" id="idGridItem_<%=data.name%>" style="width:<%=options.tile.width%>px;">';
    model_Item += '<%=content%>';
    model_Item += '</div>';
    var itemTemplate = appcan.view.template(model_Item);

    var model_NullItem = '<div class="grid-null-item ub-ver" style="width:<%=options.tile.width%>px;"></div>';
    var itemNullTemplate = appcan.view.template(model_NullItem);

    var model_Row = '<div class="ub ub-f1 grid-rows" style="width:<%=options.totalWidth%>px;"><%=content%></div>';
    var rowTemplate = appcan.view.template(model_Row);

    var model_Page = '<div class="swiper-slide ub-ver grid-page"><%=content%></div>';
    var pageTemplate = appcan.view.template(model_Page);

    function GridView(options) {
        appcan.extend(this, appcan.eventEmitter);
        var self = this;
        self.options = $.extend({
            selector : "body",
            pagination : true,
            maxRowCount : 2,
            columnCount : 3
        }, options, true);

        self.ele = $(self.options.selector);

        self.options.totalWidth = self.ele.offset().width;
        var width = self.options.totalWidth / self.options.columnCount;
        //片大小
        self.options.tile = {
            width : width,
            height : width * 12 / 11
        };

        if (self.options.data) {
            self.set(data);
        }
    };

    GridView.prototype = {
        buildItems : function(data) {
            var self = this;
            //self.options.totalRowCount;
            //self.options.totalTileCount;
            //self.options.pageCount;
            //self.options.columnCount;

            var index = 0;
            self.options.gridSlides = [];

            for (var i = 0; i < self.options.pageCount; i++) {
                var pageRows = [];
                for (var j = 0; j < Math.min(self.options.totalRowCount, self.options.maxRowCount); j++) {
                    var rowCols = [];
                    for (var ci = 0; ci < self.options.columnCount; ci++) {
                        var item = undefined;
                        if (index < data.length) {
                            var cnt = "";
                            if (self.options.drawItem)
                                cnt = self.options.drawItem(data[index]);
                            item = $(itemTemplate({
                                data : data[index],
                                options : self.options,
                                content : cnt
                            }));
                            $(item).data('g_data', JSON.stringify(data[index]));
                        } else {
                            item = $(itemNullTemplate({
                                options : self.options
                            }));
                        }
                        index++;
                        rowCols.push(item[0].outerHTML);
                    }
                    var row = $(rowTemplate({
                        content : rowCols.join(''),
                        options : self.options
                    }));
                    pageRows.push(row[0].outerHTML);
                }
                var page = $(pageTemplate({
                    content : pageRows.join(''),
                    options : self.options
                }));
                self.options.gridSlides.push(page[0].outerHTML);
            }
            return self.options.gridSlides.join('');
        },
        setPagination : function(id) {
            var self = this;
            return $('<div id="' + id + '" class="swiper-pagination"></div>');
        },
        set : function(data) {
            var self = this;
            self.ele.children().remove();
            self.container = self.container || $('<div class="swiper-wrapper"></div>');
            self.container.empty();
            if (self.pagination)
                self.pagination.empty();
            self.options.data = data;

            self.options.totalRowCount = data.length % self.options.columnCount == 0 ? (data.length / self.options.columnCount) : parseInt(data.length / self.options.columnCount) + 1;
            self.options.totalTileCount = self.options.totalRowCount * self.options.columnCount;
            self.options.pageCount = self.options.totalRowCount % self.options.maxRowCount == 0 ? (self.options.totalRowCount / self.options.maxRowCount) : parseInt(self.options.totalRowCount / self.options.maxRowCount) + 1;

            //console.log(self.options)

            var items = self.buildItems(data);
            self.container.append(items);
            self.ele.append(self.container);
            var idPagination = "pagination_" + (new Date()).getTime();
            if (self.options.pagination && self.options.pageCount > 1) {
                var pagination = self.setPagination(idPagination);
                self.ele.append(pagination);
            }

            var mySwiper = new Swiper(self.options.selector, {
                pagination : {
                    el : '#' + idPagination,
                }
            });

            appcan.button(".grid-item", "ani-act", function(e) {
                e.preventDefault();
                var data = $(this).data("g_data");
                if (self.options.itemClick) {
                    self.options.itemClick(this, e, data);
                }
            });

            self.swiper = mySwiper;
            return self;
        }
    }
    module.exports = function(options) {
        return new GridView(options);
    };
});
